<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./src/vue.js"></script>
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .cates {
        height: 50px;
        display: flex;
        align-items: center;
      }
      .cates > div {
        margin: 0 15px;
        padding: 0 15px;
        flex-shrink: 0; /* 当父元素空间不够的时候，子元素展示不下了，默认会对子元素强制压缩空间，以保证子元素宽度不会超出父元素宽度。默认值是1。设置为0标识禁止压缩子元素空间。 */
      }
      #app {
        width: 100vw;
        overflow: hidden;
      }
      .cates {
        overflow-x: scroll;
      }
      /* ::-webkit-scrollbar 取消滚动条 */
      .cates::-webkit-scrollbar {
        display: none;
      }
      .catesActive {
        font-size: 20px;
        font-weight: bolder;
      }
      .content {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <cates-item></cates-item>
      <div class="content">
        <component :is="comname"></component>
      </div>
    </div>
    <template id="cates">
      <div class="cates">
        <div
          :class="{item: true, catesActive: currentID === 4}"
          @click="changeCates(4)"
        >
          分类
        </div>
        <div
          :class="{item: true, catesActive: currentID === 5}"
          @click="changeCates(5)"
        >
          精选
        </div>
        <div
          @click="changeCates(cate.id)"
          :class="{item: true, catesActive: currentID === cate.id}"
          v-for="cate in cates"
          :key="cate.id"
        >
          {{cate.name}}
        </div>
      </div>
    </template>
    <template id="catesCom">
      <div class="cates_com">分类组件</div>
    </template>
    <template id="goodsCom">
      <div class="goods_com">精选组件</div>
    </template>
    <template id="courseCom">
      <div class="course_com">剩余组件</div>
    </template>
    <script>
      const catesItem = {
        template: "#cates",
        data() {
          return {
            cates: [],
            currentID: 5, // 默认选中的分类id为精选的id
          };
        },
        created() {
          fetch("https://m.lanqb.com/api/course-group-list")
            .then(res => res.json())
            .then(data => {
              console.log(data);
              this.cates = data.course_fields;
            });
        },
        methods: {
          changeCates(id) {
            this.currentID = id;
            let comName = "";
            switch (id) {
              case 4:
                comName = "catesCom";
                break;
              case 5:
                comName = "goodsCom";
                break;
              default:
                comName = "courseCom";
                break;
            }
            this.$parent.getCatesType(comName);
          },
        },
      };
      const catesCom = {
        template: "#catesCom",
      };
      const goodsCom = {
        template: "#goodsCom",
      };
      const courseCom = {
        template: "#courseCom",
      };
      const vm = new Vue({
        el: "#app",
        data: {
          comname: "goodsCom",
        },
        methods: {
          getCatesType(typeName) {
            this.comname = typeName;
          },
        },
        components: {
          catesItem,
          catesCom,
          goodsCom,
          courseCom,
        },
      });
    </script>
  </body>
</html>
